<template>
    <div>
        <el-card>
            <el-table :data="tableData" border stripe style="margin: 10px 0;">
                <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
                <el-table-column align="center" prop="skuName" show-overflow-tooltip label="名称"
                    width="250"></el-table-column>
                <el-table-column align="center" prop="skuDesc" show-overflow-tooltip label="描述"
                    width="250"></el-table-column>
                <el-table-column align="center" label="默认图片" width="150">
                    <template #="{ row, $index }">
                        <el-image style="width: 88px;height: 88px;" :src="row.skuDefaultImg" fit="fill" :lazy="true" />
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="weight" label="重量(g)" width="150"></el-table-column>
                <el-table-column align="center" prop="price" label="价格(元)" width="150"></el-table-column>
                <el-table-column label="操作" fixed="right" width="250" align="center">
                    <template #="{ row, $index }">
                        <el-button :title="row.isSale == 1 ? '下架' : '上架'" :icon="row.isSale == 1 ? 'Bottom' : 'Top'"
                            :type="row.isSale == 1 ? 'warning' : 'success'" size="small"
                            @click="addSKU(row)"></el-button>
                        <el-button icon="edit" type="primary" size="small" @click="edit(row)" title="修改SKU"></el-button>
                        <el-button icon="view" type="info" size="small" @click="lookSku(row)" title="查看SKU"></el-button>
                        <el-button icon="delete" type="danger" size="small" @click="deleteSku(row.id)"
                            title="删除SKU"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]"
                :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
                @size-change="handleSizeChange" @current-change="load" />

            <el-drawer size="40%" v-model="drawer" title="商品详情">
                <el-row>
                    <el-col :span="6">名称</el-col>
                    <el-col :span="18" style="line-height: 1.8;">{{ skuInfo.skuName }}</el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6">描述</el-col>
                    <el-col :span="18" style="line-height: 1.8;">{{skuInfo.skuDesc}}</el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6">价格</el-col>
                    <el-col :span="18">{{ skuInfo.price }}</el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6">平台属性</el-col>
                    <el-col :span="18">
                        <el-tag style="margin: 5px;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{item.valueName}}</el-tag>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6">销售属性</el-col>
                    <el-col :span="18">
                        <el-tag v-for="item in skuInfo.skuSaleAttrValueList" style="margin: 0 8px;" :key="item.id">{{item.saleAttrValueName }}</el-tag>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="6">商品图片</el-col>
                    <el-col :span="18">
                        <el-carousel :interval="4000" type="card" height="160px">
                            <el-carousel-item indicator-position="outside" v-for="item in skuInfo.skuImageList" :key="item.id">
                                <el-image :src="item.imgUrl" style="width: 100%;height: 100%;":lazy="true"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </el-col>
                </el-row>
            </el-drawer>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqSkuList, reqRemoveSku, reqCancelSale, reqSaleSku, reqSkuInfo } from '@/api/product/sku/index'
import { ElMessage } from 'element-plus';
import type { SkuData,SkuInfoData } from '@/api/product/sku/type'

let pageNum = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)
let tableData = ref<any>([])
let skuInfo = ref<any>({})
//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)

onMounted(() => {
    load()
})

const load = async (page = 1) => {
    pageNum.value = page;
    let res: any = await reqSkuList(pageNum.value, pageSize.value)
    if (res.code == 200) {
        tableData.value = res.data.records
        total.value = res.data.total
    }
}

const addSKU = async (row: SkuData) => {
    //如果当前商品的isSale==1,说明当前商品是上架的额状态->更新为下架
    //否则else情况与上面情况相反
    if (row.isSale == 1) {
        //下架操作
        await reqCancelSale((row.id as number));
        //提示信息
        ElMessage({ type: 'success', message: '下架成功' });
        //发请求获取当前更新完毕的全部已有的SKU
        load(pageNum.value);
    } else {
        //下架操作
        await reqSaleSku((row.id as number));
        //提示信息
        ElMessage({ type: 'success', message: '上架成功' });
        //发请求获取当前更新完毕的全部已有的SKU
        load(pageNum.value);
    }
}
const edit = (row: any) => {
    ElMessage({ type: 'info', message: '暂无此功能' })
}
const lookSku = async (row: SkuData) => {
    drawer.value = true
    let res: SkuInfoData = await reqSkuInfo((row.id as number))
    if (res.code == 200) {
        skuInfo.value = res.data
    }
}
const deleteSku = async (id: number) => {
    //删除某一个已有商品的情况
    let result: any = await reqRemoveSku(id);
    if (result.code == 200) {
        //提示信息
        ElMessage({ type: 'success', message: '删除成功' });
        //获取已有全部商品
        load(tableData.value.length > 1 ? pageNum.value : pageNum.value - 1);
    } else {
        //删除失败
        ElMessage({ type: 'error', message: '系统数据不能删除' });
    }
}
const handleSizeChange = () => {
    load()
}
</script>

<style scoped lang="scss">
</style>